<template>
  <view class="index-page">
    <map id="mapId" @regionchange="onRegionchange" @markertap="onMarkertap" :showLocation="true" scale="17" :markers="markers" :longitude="location.lng" :latitude="location.lat" class="map"> </map>
    <view class="center-marker-addr">
      <view class="addr-content">
        <view class="addr-text"> {{ addr.length > 19 ? addr.slice(0, 19) + '...' : addr }}</view>
        <image class="arrow-right" src="../../assets/icon/arrow-right.png"></image>
      </view>
    </view>
    <image class="center-marker" src="../../assets/icon/localtion_point.png"></image>
    <view class="option-panel">
      <!-- <view class="option-panel-cloumn"></view> -->
    </view>
  </view>
</template>

<script setup>
import poi_point from '@/assets/icon/poi_point.png'
import { ref } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import { parseAddress } from '@/api/address'

const location = ref({
  lng: 113.3426,
  lat: 23.10539
})
const addr = ref('正在获取地点...')
const markers = ref([])

const getCenterLatLong = () => {
  const mapCtx = Taro.createMapContext('mapId')
  mapCtx.getCenterLocation({
    success: async res => {
      renderMap(res)
    },
    fail: res => {
      console.log('fail: ', res)
    },
    complete: res => {}
  })
}

const renderMap = async ({ latitude, longitude }) => {
  const res = await parseAddress({ latitude, longitude })
  console.log(res)
  const { address, recommend, lat, lng, pois } = res
  addr.value = recommend || address
  const markerList = pois.map((p, id) => {
    return {
      id,
      label: {
        content: p.title,
        color: '#004198',
        anchorY: -16,
        anchorX: 6,
        fontSize: 11
      },
      latitude: p.location.lat,
      longitude: p.location.lng,
      width: '16px',
      height: '16px',
      iconPath: poi_point
    }
  })
  markers.value = markerList
  // console.log(markerList)
}

const onRegionchange = e => {
  const { type } = e
  if (['end', 'regionchange'].includes(type)) {
    setTimeout(() => {
      getCenterLatLong()
    }, 2500)
  }
}

const onMarkertap = e => {
  console.log('----------------------------------')
  console.log(e.detail.markerId)
}

useDidShow(() => {
  wx.getLocation({
    type: 'wgs84',
    success: async res => {
      const { latitude, longitude } = res
      location.value = {
        lat: latitude,
        lng: longitude
      }
      renderMap(res)
    },
    fail: err => {
      if (err.errCode == 2 || err.errMsg.match(/getLocation:fail auth deny/i)) {
        console.log('无法获取定位，请确认打开手机系统定位及微信定位权限。')
      }
    }
  })
})
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';

.index-page {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  position: relative;
  .map {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80vh;
  }
  .center-marker {
    position: fixed;
    top: calc(50% - 64rpx);
    left: calc(50% - 32rpx);
    height: 64rpx;
    width: 64rpx;
  }
  .center-marker-addr {
    position: fixed;
    top: calc(50% - 200rpx);
    left: 0;
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    .addr-content {
      position: relative;
      display: flex;
      align-items: center;
      border-radius: 60rpx;
      background: rgba(34, 34, 34, 0.85);
      .addr-text {
        max-width: 312rpx;
        max-height: 80rpx;
        color: white;
        font-size: 26rpx;
        line-height: 40rpx;
        text-align: left;
        white-space: normal;
        padding: 14rpx 38rpx;
        margin-right: 12rpx;
      }
      .arrow-right {
        position: absolute;
        right: 12rpx;
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
  .option-panel {
    position: relative;
    content: ' ';
    width: 100%;
    height: 800px;
    margin-top: 600px;
    border-radius: 36rpx;
    background-color: #0000001a;
    // .option-panel-cloumn {
    //   content: ' ';
    //   height: 400rpx;
    //   background: white;
    //   z-index: 111;
    // }
  }
}
</style>
